<template>
  <BaseDialog title="触发群聊" :handleCancel="handleCancel" :dialogVisible="props.dialogVisible" width="800px">
    <div style="padding-bottom: 10px">关键词：{{ props.item.opinionKey }}</div>
    <el-table ref="baseTable" :data="tableData" v-loading="loading">
      <el-table-column prop="wxGroupCode" label="微信群ID" />
      <el-table-column prop="wxGroupName" label="微信群名称" />
      <el-table-column prop="num" label="触发次数" width="100" />
      <el-table-column prop="sendUserDtoList" label="客户微信昵称（触发次数）" minWidth="160">
        <template #default="scope">
          <span v-for="(item, i) in scope.row.sendUserDtoList" :key="i">
            <span> {{ item.sendUserName }}</span
            ><span>({{ item.sendNum }})</span>
            <span v-if="i + 1 < scope.row.sendUserDtoList?.length"> 、</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="communityDtoList" label="相关片区/村社" minWidth="160">
        <template #default="scope">
          <span v-for="(item, i) in scope.row.communityDtoList" :key="i">
            <span> {{ item.communityName }}</span>
            <span v-if="i + 1 < scope.row.communityDtoList?.length"> 、</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </BaseDialog>
</template>

<script setup lang="ts">
import { reportStatisticsService } from '@/api/reportStatistics';

const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },

  type: {
    type: String,
  },
});

const loading = ref(false);
const tableData = ref([]);
const getTableData = () => {
  loading.value = true;
  reportStatisticsService
    .opinionKeyRecordGetByIdStr({
      data: props.item.idStr,
    })
    .then((res) => {
      loading.value = false;
      tableData.value = res.data;
    });
};

const emit = defineEmits(['update:dialogVisible']);
const handleCancel = () => {
  emit('update:dialogVisible', false);
};
onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.detail {
  :deep(.el-form-item__label:before) {
    content: ' ' !important;
  }
}
</style>
